import React, { FC, useState } from 'react'
import { PullToRefresh, InfiniteScroll } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'



import { ShowMsg } from '../utils/message'

const LoadMore: FC<any> = ({
  children,
  refreshData,
  loadmoreData
}) => {
  const [hasMore, setHasMore] = useState(true)

  // 下拉刷新
  const onRefresh = async () => {
    await sleep(1000)
    refreshData()
    ShowMsg('刷新成功')
  }

  // 分页 加载下一页数据
  const loadMore = async () => {
    loadmoreData(() => {
      setHasMore(false) // 没有更多数据
    }, () => {
      setHasMore(true)
      ShowMsg('加载成功')
    })
  }

  return (
    <div>
      <PullToRefresh
        onRefresh={onRefresh}
      >
        {
          children
        }
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={500} />
      </PullToRefresh>
    </div>
  )
}

export default LoadMore
